<template>
  <div class="json">
    <a-row style="padding-left: 10px;height: 100%;padding-bottom: 10px">
      <a-col :span="12" class="box">
        <Codemirror
            v-model:value="code"
            :options="cmOptions"
            border
            @change="change"
        />
      </a-col>
      <a-col :span="12" class="box">
        <Codemirror
            v-model:value="formatCode"
            :options="cmOptions"
            border
            @change="change"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>

import {ref} from "vue";

export default {
  name: "Json",
  setup() {
    let code = ref('')
    let formatCode = ref('')
    const change = (e) =>{
      let obj = JSON.parse(e)
      formatCode.value = JSON.stringify(obj, null, 4)
    }
    return {
      code,
      change,
      cmOptions: {
        mode: 'json', // 语言模式
        theme: 'default', // 主题
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 4, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true, // 显示选中行的样式
      },
      formatCode
    }
  }
}
</script>

<style scoped>
.json {
  padding-top: 10px;
  height: 100%;
}

.box {
  height: 100%;
  display: flex;
  padding-right: 10px;
  justify-content: center;
  align-items: center;
}
</style>